<template>
    <div class="tabbar">
        <router-link custom v-for="item in list" :to="item.path" v-slot="{ navigate, href, route, isExactActive  }">
            <div class="item" :href="href" @click="navigate">
                <img class="icon" :src="isExactActive ? item.active : item.icon" />
                <div :class="{ acitve: isExactActive }">{{ item.name }}</div>
            </div>
        </router-link>
    </div>
</template>

<script setup>
import HomeIcon from '@/assets/home.png'
import HomeIconAct from '@/assets/home_act.png'
import ShopIcon from '@/assets/shop.png'
import ShopIconAct from '@/assets/shop_act.png'
import UserIcon from '@/assets/user.png'
import UserIconAct from '@/assets/user_act.png'
const list = [
    {
        path: '/',
        name: '首页',
        icon: HomeIcon,
        active: HomeIconAct
    },
    {
        path: '/shop',
        name: '店铺',
        icon: ShopIcon,
        active: ShopIconAct
    },
    {
        path: '/users',
        name: '我的',
        icon: UserIcon,
        active: UserIconAct
    }        
]
</script>

<style lang="scss" scoped>
.tabbar {
    height: 50px;
    display: flex;
    box-shadow: 1px -2px 20px #ddd;
    .item {
        flex: 1;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        font-size: 12px;
        color: #999; 
        .icon {
            display: block;
            width: 24px;
            height: 24px;
            margin-bottom: 2px;
        }
        .acitve {
            color: #333
        }
    }
}    
</style>